<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>

    </div>
    <p>12122112</p>
    <ul>
        <li>123</li>
        <li>132</li>
        <li>431</li>
    </ul>
    <script>
        //事件对象
        // 当你触发了事件  我们可以在事件处理函数上 接收到一个 参数 这个参数  是对象类型的
        // 所以我们叫他事件对象 里面寻访的都是关于事件的一些相关信xi
        let p = document.querySelector("p")
        p.onclick = function(event){
            console.log(event);//对象 通过  . 名字 来读取值
            
        }
        let ul = document.querySelector("ul")
        //事件委托 本该给子元素绑定的事件 我们委托给了他们的父级 再通过 target 来确定点击的目标
        ul.onclick = function(e){
            console.log("this",this);  //指向了事件源  也就是事件绑定谁那了  就是谁
            console.log("target",e.target);
            //target 表示给父级绑定事件 那么你点那个元素触发的事件  target就是谁

            e.target.classList.add("active")
            //当给一个节点绑定事件后  你点击这个节点后代 也会触发他
            //事件冒泡
            
            

        }
    </script>
</body>
</html>